'use client';

import { useState } from 'react';


interface PromptInputProps {
  setResultImage: (image: string | null) => void;
  setLoading: (loading: boolean) => void;
  setProgress: (progress: number) => void;
  loading: boolean;
  handleGenerate: (prompt: string, mode: string) => Promise<void>;
}

export default function PromptInput({ loading, handleGenerate }: PromptInputProps) {
  const [prompt, setPrompt] = useState('');
  const [selectedMode, setSelectedMode] = useState('混元');

  const onGenerateClick = async () => {
    await handleGenerate(prompt, selectedMode);
  };

  return (
    <div className="flex flex-col gap-4">
      <h2 className="text-xl font-bold">创意提示词</h2>
      <div className="flex flex-col gap-2">
        <select
          value={selectedMode}
          onChange={(e) => setSelectedMode(e.target.value)}
          className="border border-gray-300 rounded-lg p-2"
        >
          <option value="混元">精图（消耗5）</option>
          <option value="sana">普图（消耗1）</option>
        </select>
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="描述你想要的纹身图案..."
          className="w-full h-24 px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600
            focus:outline-none focus:ring-2 focus:ring-purple-500 dark:bg-gray-800
            resize-none"
          rows={3}
          maxLength={500}
        />
        <button
          onClick={onGenerateClick}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700
            transition-colors self-end"
          disabled={loading}
        >
          {loading ? '生成中...' : '生成'}
        </button>
      </div>
    </div>
  );
}
